<template>
	<div class="bg">
		<div class="delite">商品详情</div>
		<!-- 轮播框 -->
			<div class="lunbokbackgroung">
				<div class="showImg">
				    <!-- 轮播图片 -->
				    <img  @mouseover="changeInterval(true)" 
				         @mouseleave="changeInterval(false)"  
				         v-for="(item,index) in newshopitem" 
				         :src="item.imgs[currentIndex]"
				         >
						 
				    <!-- 控制圆点 -->
				    <div class="banner-circle">
				        <ul>
				            <li
							@click="changeImg(0)"  
				            :class="0===currentIndex? 'active': '' "
				             ></li>
							 <li
							 @click="changeImg(1)"  
							 :class="1===currentIndex? 'active': '' "
							  ></li>
							  <li
							  @click="changeImg(2)"  
							  :class="2===currentIndex? 'active': '' "
							   ></li>
				        </ul>
				    </div>
				</div>
			</div>
			
			<div v-for="(item,index) in newshopitem">
				<!-- 价格 -->
				<div class="price_box">￥{{item.price}}</div>
				<div class="shopname_box">{{item.shopname}}</div>
				<!-- 颜色 -->
				<div class="Big_box">
					<div class="type_box"  v-for="(item1,index) in item.type">
						<div @click="changetype(index)" :class="index==typenum?'active2':''">{{item1}}</div>
					</div>
				</div>

				<!-- 规格 -->
				<div  class="Big_box">
					<div class="specification_box" v-for="(item2,index) in item.specification">
						<div @click="changespecification(index)" :class="index==specificationnum?'active2':''">{{item2}}</div>
					</div>
				</div>
				
				<div class="nums_box">
					<div @click="changenums()">-</div>
					<div>{{nums}}</div>
					<div @click="nums++">+</div>
				</div>
			</div>
			
			<div class="img_box">商品介绍图1</div>
			<div class="img_box">商品介绍图2</div>
			<div class="img_box">商品介绍图3</div>
			
			
			<div class="bottom_box">
				<div @click="addshopCart()">加入购物车</div>
				<div>立即购买</div>
			</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
	    data () {
	        return {
				currentIndex:0,
				timer:null,
				numid:0,
				newshopitem:[],
				typenum:0,
				specificationnum:0,
				nums:1,
	        }
			
	    },
		computed:{
			//调用vuex从后台获取的数据
			...mapState({
				shopitem:state=>state.shopitem.shopitem,
			})
		},
		methods:{
			addshopCart(){
				this.$store.dispatch('shopcart/changeCart',{
					id:this.$route.params.id,
					typenum:this.typenum,
					specificationnum:this.specificationnum,
					nums:this.nums,
					shopname:this.$route.params.shopname,
					imgs:this.$route.params.imgs,
					price:this.$route.params.price,
					type:this.$route.params.type,
					specification:this.$route.params.specification,
					isbool:this.$route.params.isbool
					// [id,名字，数量，图片，价格,颜色，颜色数，规格，规格数,布尔值]
				})
			},
			changetype(index){
				this.typenum=index;
			},
			changenums(){
				if(this.nums>1){
					this.nums--;
				}
			},
			changespecification(index){
				this.specificationnum=index;
			},
			huoqu(){
				this.numid=this.$route.params.id;
				this.newshopitem=[];
					this.shopitem.forEach(item=>{
						if(item.id==this.numid){
							this.newshopitem.push({
								id:item.id,
								price:item.price,
								nums:item.nums,
								type:item.type,
								imgs:item.imgs,
								shopname:item.shopname,
								specification:item.specification,
								brand:item.brand,
								isbool:item.isbool,
								});
						}
					})
				
			},
			
				//开启定时器
				startInterval(){
					// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
					clearInterval(this.timer);
					this.timer = setInterval(()=>{
						this.currentIndex++;
						if(this.currentIndex > 2){
							this.currentIndex = 0
						}
					},3000)
				},
				// 点击控制圆点
				changeImg(num){
					this.currentIndex = num
				},
				//鼠标移入移出控制
				changeInterval(val){
					if(val){
						clearInterval(this.timer)
					}else{
						this.startInterval()
					}
				}
			
		},
		created() {
			this.huoqu();
			this.startInterval();
		}
		}
</script>

<style scoped>
	.bg{
		background-color: honeydew;
	}
	.delite{
		font-weight: bold;
	}
	.lunbokbackgroung{
		margin-top: 1rem;
		background-color: whitesmoke;
		width: 18.75rem;
		margin: auto;
		border: 0.125rem solid whitesmoke;
	}
	li {
		list-style-type: none;
	}
	.showImg{
		position: relative;
		width: 20rem;
		height: 15rem;
		margin: auto;
		overflow: hidden;
	}
	/* 轮播图片 */
	.showImg img{
		width: 100%;
		height: 100%;
	}
	/* 控制圆点 */
	.banner-circle{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 1.25rem;
	}
	.banner-circle ul{
		margin: auto;
		height: 100%;
		text-align: center;
		margin-left: -2rem;
	}
	.banner-circle ul li{
		display: inline-block;
		width: 0.5rem;
		height: 0.5rem;
		margin: 0 auto;
		border-radius: 7px;
		background-color: rgba(125,125,125,.8);
		cursor: pointer;
	}
	.active{
		background-color: black !important; 
	}
	.bottom_box{
		position: fixed;
		width: 104%;
		height: 3rem;
		line-height: 3rem;
		left: -0.2rem;
		display: flex;
		flex-direction: row;
		bottom: 0rem;
		text-align: center;
	}
	.bottom_box div{
		width: 50%;
	}
	.bottom_box div:first-child{
		background-color: darkorange;
	}
	.bottom_box div:last-child{
		background-color: red;
	}
	.active2{
		color: aqua;
		background-color: aliceblue;
	}
	.price_box{
		font-size: 1.7rem;
		color: coral;
		text-align: left;
		margin-left: 1.5rem;
	}
	.shopname_box{
		font-size: 1.25rem;
		text-align: left;
		margin-left: 1.5rem;
	}
	.Big_box{
		display: flex;
		flex-direction: row;
		margin-left: 0.8rem;
		margin-top: 0.8rem;
		flex-wrap: wrap;
	}
	.type_box div,.specification_box div{
		width: 4.125rem;
		height: 1.875rem;
		line-height: 1.873rem;
		margin-left: 0.2rem;
		border: 0.0625rem solid gainsboro;
		
	}
	.img_box{
		margin-top: 1rem;
		
		margin: auto;
		width: 18.75rem;
		height: 18.75rem;
		border: 0.0625rem solid gainsboro;
	}
	.nums_box{
		display: flex;
		flex-direction: row;
		margin-left: 0.8rem;
	}
	.nums_box div{
		border: 0.0625rem solid whitesmoke;
		width: 3rem;
		height:3rem;
		line-height: 3rem;
		font-size: 1.1875rem;
		margin-top: 1rem;
	}
</style>